<template>
  <el-dialog v-model="dialogShow" title="添加配送商" :before-close="dialogClose">
    <div style="height: 400px;overflow-y: auto;">
      <el-form ref="ruleFormRef" :model="distributorsForm" :rules="rules" label-width="150px" class="formBox">
        <el-form-item label="名称：" prop="dlrName">
          <el-input v-model="distributorsForm.dlrName" class="w250" placeholder="请输入配送商名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人/法人代表：" prop="legalPerson">
          <el-input v-model="distributorsForm.legalPerson" class="w250" placeholder="请输入负责任人姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" prop="legalIdCard">
          <el-input v-model="distributorsForm.legalIdCard" class="w250" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="tel">
          <el-input v-model="distributorsForm.tel" class="w250" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="配送商类型：" prop="dlrType">
          <el-select v-model="distributorsForm.dlrType" class="w250" placeholder="请选择">
            <el-option v-for="item in dlrTypeList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经营地址：" prop="countriesCode">
          <el-select v-model="distributorsForm.provincesCode" class="w120 mR10" placeholder="请选择" @change="getCitiesList">
            <el-option v-for="item in provincesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-show="distributorsForm.provincesCode" v-model="distributorsForm.citiesCode" class="w120 mR10" placeholder="请选择" @change="getCountriesList">
            <el-option v-for="item in citiesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-show="distributorsForm.citiesCode" v-model="distributorsForm.countriesCode" class="w120 mR10" placeholder="请选择" @change="getstreetList">
            <el-option v-for="item in countriesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属街道办：" prop="streetAreaId">
          <el-select v-model="distributorsForm.streetAreaId" class="w250" placeholder="请选择">
            <el-option v-for="item in streetList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input v-model="distributorsForm.address" class="w250" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="所属代理商：" prop="agentIdSel">
          <el-select v-model="distributorsForm.agentIdSel" class="w250" placeholder="请选择" @change="getMarketerList">
            <el-option v-for="item in agentIdSelList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市场人员：" prop="marketerSe">
          <el-select v-model="distributorsForm.marketerSe" class="w250" placeholder="请选择">
            <el-option v-for="item in marketerSeList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户属性：">
          <el-select v-model="distributorsForm.customerPro" clearable class="w250" placeholder="请选择">
            <el-option label="标杆用户" value="GOODUSER"></el-option>
            <el-option label="普通用户" value="ORDINORYUSER"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户来源：">
          <el-select v-model="distributorsForm.customerSource" clearable class="w250" placeholder="请选择">
            <el-option v-for="item in customerSourceList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业证图片：">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="distributorsForm.imageUrl" :src="distributorsForm.imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon" :size="50"><plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="textRigth mT10">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="dialogClose">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
  import {
    reactive,
    onMounted,
    inject,
    ref
  } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  const $post = inject('$post');
  const $getProvinces = inject('$getProvinces');
  const $getCities = inject('$getCities');
  const $getCountries = inject('$getCountries');
  const props = defineProps({
    dialogShow: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['closePopup'])
  const validateLegalIdCard = (rule, value, callback) => {//身份证验证
    let cardId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (value == '') {
      callback(new Error('请输入身份证号'))
    } else if(!cardId.test(value)){
      callback(new Error('请输入正确的身份证号'))
    } else {
      callback()
    }
  }
  const validateTel = (rule, value, callback) => {//联系电话验证
    let cardId = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (value == '') {
      callback(new Error('请输入手机号码'))
    } else if(!cardId.test(value)){
      callback(new Error('必须是电话号码'))
    } else {
      callback()
    }
  }
  const streetRequired = ref(true);
  const distributorsForm = reactive({
    dlrName: '',
    legalPerson: '',
    legalIdCard: '',
    tel: '',
    dlrType: '',
    address: '',
    streetAreaId: '',
    agentIdSel: '',
    marketerSe: '',
    customerPro: '',
    customerSource: '',
    provincesCode: '',
    citiesCode: '',
    countriesCode: '',
    imageUrl: ''
  })
  const rules = reactive({
    dlrName: [{
      required: true,
      message: '请输入配送商名称',
      trigger: 'blur'
    }],
    legalPerson: [{
      required: true,
      message: '请输入负责任人姓名',
      trigger: 'blur'
    }],
    legalIdCard: [{ 
      required: true, 
      validator: validateLegalIdCard, 
      trigger: 'blur' 
    }],
    tel: [{
      required: true,
      validator: validateTel,
      trigger: 'blur'
    }],
    dlrType:  [{
      required: true,
      message: '请选择配送商类型',
      trigger: 'blur'
    }],
    streetAreaId: [{
      required: streetRequired,
      message: '请选择所属街道办',
      trigger: 'blur'
    }],
    countriesCode: [{
      required: true,
      message: '请选择经营地址',
      trigger: 'blur'
    }],
    address: [{
      required: true,
      message: '请输入详细地址',
      trigger: 'blur'
    }],
    agentIdSel: [{
      required: true,
      message: '请选择所属代理商',
      trigger: 'blur'
    }],
    marketerSe: [{
      required: true,
      message: '请选择市场人员',
      trigger: 'blur'
    }]
  })
  const dialogClose = ()=>{
    emit('closePopup');
  }
  const dlrTypeList = ref([]);//配送商类型
  const streetList = ref([]);//所属街道办
  const agentIdSelList = ref([]);//所属代理商
  const marketerSeList = ref([]);//市场人员
  const customerSourceList = ref([]);//客户来源

  const provincesList = $getProvinces();//省
  const citiesList = ref([]);//市
  const countriesList = ref([]);//区
  const getCitiesList = ()=>{//获取市列表
    citiesList.value = $getCities(distributorsForm.provincesCode);
    distributorsForm.citiesCode = '';
    distributorsForm.countriesCode = '';
    distributorsForm.streetAreaId = '';
  }
  const getCountriesList = ()=>{//获取区列表
    countriesList.value = $getCountries(distributorsForm.citiesCode);
    distributorsForm.countriesCode = '';
    distributorsForm.streetAreaId = '';
  }
  const getstreetList = ()=>{//获取街道列表
    distributorsForm.streetAreaId = '';
    $post('/consumer/street', {
      areaId: distributorsForm.countriesCode
    }).then(res => {
      streetList.value = res.data;
      if (res.data.length == 0) {//没有街道
        streetRequired.value = false;
      } else {
        streetRequired.value = true;
      }
    })
  }
  const getMarketerList = ()=>{//获取市场人员列表
    marketerSeList.value = [];
    $post('/v2/consumer/marketerList',{
      agentId: distributorsForm.agentIdSel
    }).then(res => {
      marketerSeList.value = res.data;
    })
  }
  const save = ()=>{//保存

  }
  onMounted(()=>{
    $post('/v2/marker/typelist').then(res => {
      dlrTypeList.value = res.data;
      console.log(dlrTypeList,'dlrTypeList');
    })
    $post('/v2/consumer/agentList').then(res => {
      agentIdSelList.value = res.data;
    })
    $post('/v2/consumer/sourcetype').then(res => {
      customerSourceList.value = res.data;
    })
  })
</script>
<style lang="scss" scoped>
  .formBox{
    width: 550px;
    margin: 0 auto;
  }
  .w250{
    width: 250px;
  }
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .avatar-uploader-icon{
    width: 100px;
    height: 100px;
    font-size: 28px;
  }
</style>